<style type="text/css">
    .form-box {
        padding: 20px 20px 0 20px;
    }
</style>

<div id="user-form" lay-filter="userForm" class="layui-form form-box">
    <div class="layui-form-item">
        <label class="layui-form-label">当前用户: </label>
        <div class="layui-input-inline">
            <select id="users" name="users" lay-filter="userSelect">
                <option value=""></option>
                <option :value="item.id" :data-group="item.roleId" v-for="item in users">{{ item.realName }}</option>
            </select>
        </div>
    </div>
</div>

<div id="layui-container" class="layui-anim layui-anim-downbit">
    <table class="layui-hide" id="data-table" lay-filter="dataTable"></table>
</div>

<!-- 审批人审批节点详情 start -->
<script id="audit-detail" type="text/html">
    <div class="form-box">
        {{# layui.each (d.list, function(index, item) { }}
        <fieldset class="layui-elem-field">
            <legend>{{ item.instanceNodeName }} - {{ item.auditResult }}</legend>
            <div class="layui-field-box">
                {{ item.auditOpinion }}
            </div>
        </fieldset>
        {{# }); }}
    </div>
</script>
<!-- 审批人审批节点详情 end -->

<script type="text/html" id="tablebarDemo">
    <button class="layui-btn layui-btn-xs" lay-event="auditDetail">审批详情</button>
</script>

<script type="text/javascript" src="lib/vue/vue.min.js"></script>

<script type="text/javascript">
    layui.use(['form', 'table', 'laytpl', 'util'], function () {
        let form = layui.form;
        let table = layui.table;
        let util = layui.util;
        let laytpl = layui.laytpl;

        let tableIns = table.render({
            elem: '#data-table',
            url: api.auditHistory,
            method: 'post',
            contentType: 'application/json',
            //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cellMinWidth: 80,
            page: true,
            limit: 15,
            limits: [15, 30, 45, 60],
            cols: [[
                {type: "checkbox", width: 50},
                {field: '', title: '序号', type: 'numbers'},
                {field: 'instanceId', title: '流程实例ID', width: 140},
                {field: 'instanceNodeId', title: '流程节点ID', width: 150},
                {field: 'currentFrontNodeId', title: '当前节点ID', width: 180},
                {field: 'instanceName', title: '流程实例名称', width: 200},
                {field: 'userId', title: '发起人ID'},
                {field: 'flowStatus', title: '流程状态'},
                {field: '', width: 120, title: '操作', templet: '#tablebarDemo'}
            ]],
            request: {
                pageName: "currentPage",
                limitName: "pageSize"
            }
        });

        /* VUE实例 */
        let vm = new Vue({
            el: '#user-form',
            data: {
                approvalId: '',
                users: []
            },
            methods: {}
        });

        let active = {
            auditDetail: function (data) {
                let tpl = document.getElementById("audit-detail").innerHTML;
                laytpl(tpl).render({list: data.instanceApprovers}, function (html) {
                    layer.open({
                        type: 1,
                        content: html,
                        title: data.instanceName,
                        area: ['300px', '400px'],
                        maxmin: false,
                        shade: 0.3,
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            return layer.close(index);
                        }
                    });
                });
            },
            loadUsers: function () {
                request.bodyAjax(api.sysUsers, {}, function (res) {
                    if (res.success) {
                        vm.users = res.data;
                        setTimeout(() => {
                            form.render(null, 'userForm');
                        }, 500);
                    }
                });
            }
        };

        active.loadUsers();

        // layui的btn单独添加点击事件
        util.event('lay-active', active);

        form.on('select(userSelect)', function (data) {
            tableIns.reload({
                where: {
                    approvalId: data.value
                }
            });
        });

        // 操作列
        table.on('tool(dataTable)', function (obj) {
            let layEvent = obj.event;
            let action = active[layEvent];
            if (action) {
                action(obj.data);
            }
        });

    });

</script>
